<template>
  <div class="all">
    <div class="top">
      <!--header 第一行标签  -->
      <header>
        <div class="divwai">
          <div class="div" @click="back()">
            <img src="../../../assets/返回.png" alt="" />
            <span class="solid">返回</span>
          </div>
          <div class="div">
            <span>体重</span>
          </div>
          <div class="div">
            <img @click="add()" src="../../../assets/蓝添加.png" alt="" />
            <span @click="add()" class="solid">新增记录</span>
          </div>
        </div>
        <div class="divwai">
          <!-- div占位符 -->
          <div class="div"></div>
          <div class="div1">
            <ul class="tabUl">
              <li
                :class="tabIndex == 0 ? 'selectTab' : 'selectTab_date'"
                @click="clickTabBar(0)"
              >
                体重
              </li>
              <li
                :class="tabIndex == 1 ? 'selectTab' : 'selectTab_date'"
                @click="clickTabBar(1)"
              >
                统计
              </li>
            </ul>
          </div>
          <div class="div"></div>
        </div>
      </header>

      <!-- 体重的title -->
      <div class="ti-title" v-show="tabIndex == 0">
        <div class="ti-one">
          <div class="ti-one-left"></div>
          <div class="ti-one-left">
            <div class="ti-one-riqi">
              <span style="align-items: center" @click="dateShow = true">
                <a>{{ nTime }}</a>
                <img
                  style="
                    width: 10px;
                    height: 5px;
                    margin-left: 5px;
                    margin-bottom: 3px;
                  "
                  src="../../../assets/sortBottom.png"
                  alt=""
                />
              </span>
            </div>
          </div>
          <!-- 体重的 日期弹出框 -->
          <van-popup
            round
            position="bottom"
            :style="{ bottom: '50px' }"
            v-model="dateShow"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="dateShow = false"
              @confirm="dateConfirm"
              :formatter="formatter"
            />
          </van-popup>
          <div class="ti-one-left">
            <div class="ti-one-jilu" @click="LiShiList()">
              <p>历史记录</p>
            </div>
          </div>
        </div>
        <div class="ti-two">
          <div class="ti-two-div" @click="prev()">
            <!-- 占位符 占位置 -->
            <div style="height: 10px"></div>
            <div class="ti-two-jilu">
              <van-icon name="arrow-left" size="20" />
            </div>
            <div class="ti-two-jilu">
              <p>上一次记录</p>
            </div>
          </div>
          <div class="ti-two-div">
            <p>
              <h style="font-size: 25px; color: #1da4f2">{{ ntizhong }} </h
              ><h>kg</h>
            </p>
          </div>
          <div class="ti-two-div" @click="next()">
            <div style="height: 10px"></div>
            <div class="ti-two-jilu">
              <van-icon name="arrow" size="20" />
            </div>
            <div class="ti-two-jilu">
              <p>下一次记录</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 体重的  矩形显示BMI -->
      <div class="ti-bmi" v-show="tabIndex == 0">
        <div class="ti-bmi-left">
          <div class="ti-bmi-shang" @click="bmishow = true">
            <p>
              BMI指数
              <img
                v-show="tabIndex == 0"
                style="width: 13px; height: 13px; margin-right: 5px"
                src="../../../assets/帮助小@2x.png"
                alt=""
              />
            </p>
          </div>
          <div class="ti-bmi-xia">
            <p>
              {{ ti_bmi }}
              <h class="ti_zi_1" v-show="ti_bmi < 18.5 && ti_bmi > 0">&#8194;偏瘦&#8194;</h>
              <h class="ti_zi_2" v-show="ti_bmi > 18.5 && ti_bmi < 24">&#8194;正常&#8194;</h>
              <h class="ti_zi_3" v-show="ti_bmi > 24 && ti_bmi < 28">&#8194;超重&#8194;</h>
              <h class="ti_zi_4" v-show="ti_bmi > 28">&#8194;肥胖&#8194;</h>
            </p>
          </div>
        </div>
        <div class="ti-bmi-div">
          <div class="ti-bmi-shang">
            <p>标准体重(kg)</p>
          </div>
          <div class="ti-bmi-xia">
            <p>{{ ti_kg }}</p>
          </div>
        </div>
      </div>
      <!-- 体重的 bmi指数参考值弹出框 -->
      <van-dialog
        v-model="bmishow"
        width="80%"
        :style="{ maxHeight: '70%', overflow: 'auto' }"
        confirm-button-color="#1da4f2"
        confirmButtonText="知道了"
        :lock-scroll="false"
      >
        <!-- 体重的 bmi弹窗框 -->
        <div class="bmi-zhishu">
          <div class="bmi-zhishu-bmi">
            <h>BMI</h>
          </div>
          <hr />
          <p>
            身体质量指数(BMI)是目前国际上常用的肥胖衡量标准，我们使用的是更适合亚洲人体质的衡量标准。BMI=体重(kg)/身高(m)2。
          </p>
          <hr />
          <div class="bmi-tu">
            <div class="bmi-4">
              偏瘦
              <div
                style="
                  width: 100%;
                  height: 10px;
                  border-radius: 25px 0px 0px 25px;
                  background: #90dc62;
                "
              ></div>
            </div>
            <div class="bmi-4">
              正常
              <div style="width: 100%; height: 10px; background: #4fcc80"></div>
            </div>
            <div class="bmi-4">
              超重
              <div style="width: 100%; height: 10px; background: #f2d243"></div>
            </div>
            <div class="bmi-4">
              肥胖
              <div
                style="
                  width: 100%;
                  height: 10px;
                  border-radius: 0px 25px 25px 0px;
                  background: #ee5021;
                "
              ></div>
            </div>
          </div>
          <div class="bmi-tu-shu">
            <div class="bmi-3"></div>
            <div class="bmi-3">18.5</div>
            <div style="width: 20px"></div>
            <div class="bmi-3">24.0</div>
            <div style="width: 20px"></div>
            <div class="bmi-3">28.0</div>
            <div class="bmi-3"></div>
          </div>
          <hr />
        </div>
      </van-dialog>
      <!-- 体重的 身体构成 -->
      <div class="ti-shenti" v-show="tabIndex == 0">
        <div style="height: 10px"></div>
        <div
          class="ti-shentigoucheng"
          style="
            font-size: 15px;
            font-family: 'PingFang-SC-Bold';
            font-weight: bold;
          "
        >
          <h>身体构成</h>
        </div>
        <div class="ti-goucheng">
          <div class="ti-goucheng-div">
            <p>
              <img
                src="../../../assets/tizhilv.png"
                alt=""
                class="ti_icon"
              />体脂率(%)
            </p>
            <h>{{ tizhi }}</h>
          </div>
          <div class="ti-goucheng-div">
            <p>
              <img
                src="../../../assets/jiroulv.png"
                alt=""
                class="ti_icon"
              />肌肉率(%)
            </p>
            <h>{{ jirou }}</h>
          </div>
          <div class="ti-goucheng-div">
            <p>
              <img
                src="../../../assets/shentishuifen.png"
                alt=""
                class="ti_icon"
              />身体水分(%)
            </p>
            <h>{{ shuifen }}</h>
          </div>
          <div class="ti-goucheng-div">
            <p>
              <img
                src="../../../assets/danbaizhihanliang.png"
                alt=""
                class="ti_icon"
              />蛋白质含量(%)
            </p>
            <h>{{ danbaizhi }}</h>
          </div>
          <div class="ti-goucheng-div">
            <p>
              <img
                src="../../../assets/neizangzhifangdengji.png"
                alt=""
                class="ti_icon"
              />内脏脂肪等级
            </p>
            <h>{{ zhifang }}</h>
          </div>
          <div class="ti-goucheng-div">
            <p>
              <img
                src="../../../assets/guyanliang.png"
                alt=""
                class="ti_icon"
              />骨盐量(kg)
            </p>
            <h>{{ guyan }}</h>
          </div>
        </div>
      </div>

      <!-- 统计的  日期段 -->
      <div class="title" v-show="tabIndex == 1">
        <span
          style="display: flex; align-items: center"
          @click="gouchengShow = true"
        >
          <a> {{ choose_goucheng }} </a>
          <img
            style="width: 13px; height: 7px; margin-left: 5px"
            src="../../../assets/sortBottom.png"
            alt=""
          />
        </span>
        <span
          style="display: flex; align-items: center"
          @click="timeShow = true"
        >
          <a> {{ sTime }} - {{ eTime }} </a>
          <img
            style="width: 13px; height: 7px; margin-left: 5px"
            src="../../../assets/sortBottom.png"
            alt=""
          />
        </span>
      </div>
      <!--统计的 身体构成弹出框 -->
      <van-popup v-model="gouchengShow" round position="bottom">
        <van-picker
          show-toolbar
          title="身体构成"
          :columns="gouchengColumns"
          @cancel="gouchengShow = false"
          @confirm="gouchengOnConfirm"
        />
      </van-popup>
      <!--统计的  日期段弹出框  -->
      <van-calendar
        color="#1da4f2"
        :style="{ bottom: '50px' }"
        v-model="timeShow"
        type="range"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="timeOnConfirm"
      />
      <!-- 统计的  折线图盒子 -->
      <div style="background: #fff">
        <div class="main1" ref="main" v-show="tabIndex == 1"></div>
      </div>
      <!-- 统计的  矩形显示最大最小体重 -->
      <div class="rcorners" v-show="tabIndex == 1">
        <div class="left">
          <div class="left1">
            <img
              src="../../../assets/zuigaotizhong.png"
              alt=""
              class="ti_icon2"
            />
          </div>
          <div class="left2">
            <div class="shang">最高{{ tj_max }}</div>
            <div class="xia">
              {{ maxtizhong }}
            </div>
          </div>
        </div>
        <div class="right">
          <div class="left1">
            <img
              src="../../../assets/zuiditizhong.png"
              alt=""
              class="ti_icon2"
            />
          </div>
          <div class="left2">
            <div class="shang">最低{{ tj_max }}</div>
            <div class="xia">
              {{ mintizhong }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'TiZhongEChart',
  data() {
    return {
      list: [],
      userid: this.$route.query.userid,
      tabIndex: 0, // 体重 /统计
      sTime: '',
      eTime: '',
      nTime: '',
      gouchengShow: false,
      choose_goucheng: '体重',
      gouchengColumns: [
        {
          text: '体重',
          id: 0,
        },
        {
          text: '体脂率',
          id: 1,
        },
        {
          text: '肌肉率',
          id: 2,
        },
        {
          text: '身体水分',
          id: 3,
        },
        {
          text: '蛋白质含量',
          id: 4,
        },
        {
          text: '内脏脂肪等级',
          id: 5,
        },
        {
          text: '骨盐量',
          id: 6,
        },
      ],
      timeShow: false,
      dateShow: false,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      // x轴坐标
      xlist: [],
      //体重数组
      datalist: [],
      type: 1,
      name: 'body_fat',
      maxtizhong: '', //最低体重
      mintizhong: '', //最高体重
      ntizhong: '', //现在体重
      bmishow: false, //bmi弹出框
      //矩形显示bmi和kg
      ti_bmi: '',
      ti_kg: '',
      //身体构成 数据
      tizhi: '',
      jirou: '',
      shuifen: '',
      danbaizhi: '',
      zhifang: '',
      guyan: '',
      // 统计-最高
      tj_max: '体重(kg)',
      // y轴name
      y_name: '(kg)',
    }
  },

  methods: {
    //获取日期段的体重
    getfindHealthdataTzByTime() {
      this.$http
        .findHealthdataTzByTime({
          startTime: this.sTime,
          endTime: this.eTime,
          type: this.type,
          sort: 0,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            if (res.data.data.max == null) {
              this.maxtizhong = 0
              this.mintizhong = 0
              this.xlist = [
                this.sTime.substr(5, 5) + '\n2021',
                this.eTime.substr(5, 5) + '\n2021',
              ]
              this.datalist = [0, 0]
              this.drawline()
              this.$toast('暂无数据')
            } else {
              this.list = res.data.data.list
              this.maxtizhong = res.data.data.max
              this.mintizhong = res.data.data.min
              // this.$toast('成功！')
              this.xlist = []
              this.datalist = []
              for (var i = 0; i < this.list.length; i++) {
                this.xlist[i] =
                  this.list[i].time.substr(5, 5).split('-').join('/') +
                  '\n' +
                  this.list[i].time.substr(0, 4)
                if (this.type == 1) {
                  this.datalist[i] = this.list[i].content
                } else if (this.type == 2) {
                  this.datalist[i] = this.list[i].body_fat
                } else if (this.type == 3) {
                  this.datalist[i] = this.list[i].muscle
                } else if (this.type == 4) {
                  this.datalist[i] = this.list[i].body_moisture
                } else if (this.type == 5) {
                  this.datalist[i] = this.list[i].protein
                } else if (this.type == 6) {
                  this.datalist[i] = this.list[i].level
                } else if (this.type == 7) {
                  this.datalist[i] = this.list[i].pelicometer
                }
              }
              this.drawline()
            }
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //获取某一天的体重
    getTiZhong() {
      this.$http
        .findHealthdataTzIntraday({
          time: this.nTime,
          index: '1',
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            if (res.data.data == null) {
              // this.prev()
              this.ntizhong = 0
              this.ti_bmi = 0
              this.tizhi = 0
              this.jirou = 0
              this.shuifen = 0
              this.danbaizhi = 0
              this.zhifang = 0
              this.guyan = 0
              this.ti_kg = 0
              this.$toast('暂无数据！')
            } else {
              this.ntizhong = res.data.data.list[0].content
              this.ti_bmi = res.data.data.list[0].bmi
              this.tizhi = res.data.data.list[0].body_fat.toFixed(2)
              this.jirou = res.data.data.list[0].muscle.toFixed(2)
              this.shuifen = res.data.data.list[0].body_moisture.toFixed(2)
              this.danbaizhi = res.data.data.list[0].protein.toFixed(2)
              this.zhifang = res.data.data.list[0].LEVEL.toFixed(2)
              this.guyan = res.data.data.list[0].pelicometer.toFixed(2)
              this.ti_kg = (
                (res.data.data.list[0].stature / 100) *
                (res.data.data.list[0].stature / 100) *
                21
              ).toFixed(2)
            }
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // add() 新增记录跳转
    add(item) {
      if (item) {
        this.$router.push({
          path: '/AddTiZhong',
          query: { userid: this.userid, lid: item.lid, xid: item.xid },
        })
      } else {
        this.$router.push({
          path: '/AddTiZhong',
          query: { userid: this.userid },
        })
      }
    },
    // LiShiList()历史记录跳转
    LiShiList() {
      this.$router.push({
        path: '/LiShiList',
        query: { userid: this.userid },
      })
    },
    //   切换体重和统计
    clickTabBar(num) {
      this.tabIndex = num
      if (num == 1) {
        this.getfindHealthdataTzByTime()
      }
    },
    // 日期选择
    dateConfirm() {
      this.nTime = this.Common.formatDate(this.currentDate, 'yyyy/mm/dd')
      this.dateShow = false
      this.getTiZhong()
    },
    //日期段选择
    timeOnConfirm(date) {
      const [start, end] = date
      this.timeShow = false
      this.sTime = this.Common.formatDate(start, 'yyyy/mm/dd')
      this.eTime = this.Common.formatDate(end, 'yyyy/mm/dd')
      this.getfindHealthdataTzByTime()
      this.drawline()
    },
    // 身体构成选择
    gouchengOnConfirm(value) {
      this.choose_goucheng = value.text
      this.gouchengShow = false
      this.tj_max = value.text
      // 选择不同构成时，最高最低名称，折线图y轴名字
      if (value.id == 0 || value.id == 6) {
        this.tj_max = this.tj_max + '(kg)'
        this.y_name = '(kg)'
        this.drawline()
      }
      if (value.id == 1 || value.id == 2 || value.id == 3 || value.id == 4) {
        this.tj_max = this.tj_max + '(%)'
        this.y_name = '(%)'
        this.drawline()
      }
      if (value.id == 5) {
        this.y_name = ''
        this.drawline()
      }
      this.type = value.id + 1
      this.getfindHealthdataTzByTime()
    },
    //绘制折线图
    drawline() {
      const chart = this.$refs.main
      let charts = echarts.init(chart)
      var option = {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          // 自定义显示内容
          formatter(params) {
            //  console.log(params);
            // console.log(params[0].axisValue);
            return (
              params[0].axisValue.substr(6, 4) +
              '/' +
              params[0].axisValue.substr(0, 5) +
              '<br/>' +
              params[0].marker +params[0].seriesName+
              ' : ' +
              params[0].data
            )
          },
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '5%',
          containLabel: true,
          y2: 200,
        },
        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: this.xlist,
          axisLine: {
            // x轴坐标轴，false为隐藏，true为显示
            show: false,
          },
        },
        yAxis: [
          {
            type: 'value',
            name: this.y_name,
            nameTextStyle: {
              padding: [0, 30, 10, 0],
            },

            axisLine: {
              // y轴坐标轴，false为隐藏，true为显示
              show: false,
            },
            //网格线为虚线
            splitLine: {
              show: true,
              lineStyle: {
                // y轴网格线设置
                color: '#ccc',
                width: 1,
                type: 'dotted',
              },
            },
          },
        ],
        series: [
          {
            name: this.choose_goucheng,
            type: 'line',
            data: this.datalist,
            symbol: 'circle', // 拐点样式
            symbolSize: 5, // 拐点大小
            lineStyle: {
              color: '#faa12f', // 设置折线的颜色
              borderColor: '#faa12f',
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
                color: '#1da4f2', //拐点颜色
              },
            },
          },
        ],
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
      // //获取折线图中的最大值和最小值
      // this.maxtizhong = Math.max.apply(null, this.datalist)
      // this.mintizhong = Math.min.apply(null, this.datalist)
    },
    // 返回
    back() {
      this.$router.history.go(-1)
    },
    // 上一天
    prev() {
      // 设置弹出框日期为nTime
      this.currentDate = new Date(this.nTime)
      this.nTime = this.Common.formatDate(
        this.currentDate.setDate(this.currentDate.getDate() - 1),
        'yyyy/mm/dd'
      )
      this.getTiZhong()
    },
    // 下一天
    next() {
      // 设置s弹出框日期为nTime
      this.currentDate = new Date(this.nTime)
      this.nTime = this.Common.formatDate(
        this.currentDate.setDate(this.currentDate.getDate() + 1),
        'yyyy/mm/dd'
      )
      if (new Date(this.nTime) > new Date()) {
        this.$toast('最新日期')
        this.nTime = this.Common.formatDate(
          this.currentDate.setDate(this.currentDate.getDate() - 1),
          'yyyy/mm/dd'
        )
      } else {
        this.getTiZhong()
      }
    },
    // 选择日期添加年月日
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return val + '日'
      }
      return val
    },
  },
  mounted() {
    //获取初始日期值
    this.sTime = this.Common.formatDate(
      new Date().setDate(new Date().getDate() - 7),
      'yyyy/mm/dd'
    )
    this.eTime = this.Common.formatDate(new Date(), 'yyyy/mm/dd')
    this.nTime = this.Common.formatDate(new Date(), 'yyyy/mm/dd')
    //获取折线图
    this.drawline()
    this.getTiZhong()
  },
}
</script>

<style lang="sss" scoped>
/* header divwai div 是标题布局 */
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.top {
  position: sticky;
  top: 0;
  z-index: 9;
}
header {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e5e5e5;
  background: white;
}
.divwai {
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div1 {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  flex: 1;
  justify-content: center;
}
.div:nth-child(1),
.div:nth-child(3) {
  flex: 1;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: #1da4f2;
}
.tabUl {
  width: 210px;
  color: #1da4f2;
}
.tabUl_date {
  width: 110px;
  color: #43c8db;
}
.tabUl_date,
.tabUl {
  display: flex;
  align-items: center;
}
.tabUl_date li {
  border: 1px solid #43c8db;
}
.tabUl li {
  border: 1px solid #1da4f2;
}
.tabUl_date li,
.tabUl li {
  /*width: 60px;*/
  flex: 1;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -1px;
}

.tabUl_date li:first-child,
.tabUl li:first-child {
  border-radius: 5px 0 0 5px;
}
.tabUl_date li:last-child,
.tabUl li:last-child {
  border-radius: 0 5px 5px 0;
}
.selectTab {
  background: #1da4f2 !important;
  color: #ffffff !important;
}
.selectTab_date {
  background: #fff !important;
  color: #000 !important;
}

/* title布局 */
.tableTitle,
.title {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  height: 44px;
  background: #ffffff;
  justify-content: space-between;
  font-size: 15px;
}
.tableTitle {
  height: 50px;
  background: rgba(29, 164, 242, 0.1);
  justify-content: space-between;
  color: #1da4f2;
}
/* 矩形 */
.rcorners {
  border-radius: 5px;
  background: white;
  margin-top: 3%;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 2px 2px 5px rgb(173, 173, 173);
}
.left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-right: 1px solid #e5e5e5;
}
.right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.left1 {
  width: 30%;
  text-align: center;
}
.shang {
  height: 15px;
  line-height: 50%;
  font-size: 13px;
}
.xia {
  text-align: center;
  font-size: 20px;
}
.ti_icon {
  width: 13px;
  margin-right: 3px;
}
.ti_icon2 {
  width: 20px;
}

/* 折线盒子 */
.main1 {
  background: #ffffff;
  height: 300px;
  width: 370px;
}

/* 体重布局 */
.ti-title {
  width: 100%;
  height: 120px;
  background: white;
  font-family: 'PingFang SC';
}
.ti-one {
  display: flex;
}
.ti-one-left {
  width: 33%;
  height: 100%;
  text-align: center;
}
.ti-one-riqi {
  width: 100%;
  height: 25px;
  margin-top: 7%;
  border-radius: 25px;
  background: white;
  border: 1px solid #999999;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ti-one-jilu {
  width: 60%;
  height: 25px;
  margin-top: 7%;
  margin-left: 30%;
  border-radius: 25px;
  background: #cae5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ti-one-jilu p {
  font-size: 13px;
  color: #1da4f2;
}
.ti-two {
  display: flex;
  margin-top: 5%;
}
.ti-two-div {
  width: 33%;
  height: 100%;
  text-align: center;
}
.ti-two-jilu p {
  font-size: 13px;
}
.ti-bmi {
  border-radius: 10px;
  background: white;
  margin-top: 6%;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 2px 2px 5px rgb(173, 173, 173);
}
.ti-bmi-left {
  width: 50%;
  height: 100%;
  border-right: 1px solid #e5e5e5;
}
.ti-bmi-div {
  width: 50%;
  height: 100%;
}
.ti-bmi-shang {
  width: 100%;
  height: 40%;
  margin-top: 5%;
  text-align: center;
  font-size: 13px;
}
.ti-bmi-xia {
  width: 100%;
  height: 50%;
  text-align: center;
  font-size: 20px;
}
.ti_zi_1 {
  width: 50px;
  height: 16px;
  border: 1px solid #90dc62;
  border-radius: 4px;
  font-size: 9px;
  color: #90dc62;
}
.ti_zi_2 {
  width: 50px;
  height: 16px;
  border: 1px solid #4fcc80;
  border-radius: 4px;
  font-size: 9px;
  color: #4fcc80;
}
.ti_zi_3 {
  width: 50px;
  height: 16px;
  border: 1px solid #f2d243;
  border-radius: 4px;
  font-size: 9px;
  color: #f2d243;
}
.ti_zi_4 {
  width: 50px;
  height: 16px;
  border: 1px solid #ee5021;
  border-radius: 4px;
  font-size: 9px;
  color: #ee5021;
}

/* bmi弹窗布局 */
.bmi-zhishu-bmi {
  text-align: center;
  margin-top: 2%;
  height: 30px;
  font-size: 17px;
}
.bmi-zhishu p {
  margin-top: 5%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
  font-size: 15px;
}
.bmi-tu {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 3%;
  display: flex;
  text-align: center;
}
.bmi-4 {
  width: 25%;
  font-size: 13px;
}
.bmi-tu-shu {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 3%;
  display: flex;
  text-align: center;
}
.bmi-3 {
  width: 20%;
  font-size: 13px;
}

/* 体重 身体构成布局 */
.ti-shenti {
  border-radius: 10px;
  background: white;
  margin-top: 6%;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  box-shadow: 2px 2px 5px rgb(173, 173, 173);
}
.ti-shentigoucheng {
  text-align: center;
  font-family: PingFang-SC-Bold;
}
.ti-goucheng {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5%;
}
.ti-goucheng-div {
  width: 50%;
  height: 70px;
}
.ti-goucheng-div p {
  margin-bottom: 5%;
  font-size: 13px;
  margin-left: 13%;
}
.ti-goucheng-div h {
  font-size: 17px;
  margin-left: 30%;
}
</style>